<template>
    <div class="demo-split">
        <Split v-model="split">
            <template #left>
                <div class="demo-split-pane">
                    <TreeTable :connect=props.connect @click-row="handleRowClick"/>
                </div>
            </template>
            <template #right>
                <div class="demo-split-pane">
                    <Content :connect=props.connect :node="activeNode"/>
                </div>
            </template>
        </Split>
    </div>
</template>
<script setup>
import {onMounted, ref, h, defineProps} from "vue";
import {Split} from "view-ui-plus";
import TreeTable from "@/components/etcd2/DataTree.vue";
import Content from "@/components/etcd2/DataEditor.vue";
import {etcd_keys_get} from "@/api/etcd2.js";
import {ElMessage} from "element-plus";

const props = defineProps({
    connect: {
        type: Object,
        default: {
            name: '默认标题',
            url: 'http://127.0.0.1:2379',
            version: 'v2',
            username: 'root',
            password: '123456'
        }
    }
})

const split = ref(0.4)
const activeNode = ref({
    dir: false,
    key: 'string',
    name: 'string',
    value: 'string',
    ttl: 'string',
    createdIndex: 'string',
    modifiedIndex: 'string'
})

function handleRowClick(row) {
    let key = row.key;
    let url = props.connect.url;
    etcd_keys_get(url,key)
        .then(res=>{
            activeNode.value = res.data.node;
            console.log('activeNode.value', activeNode.value);
        })
        .catch(error=>{
            let message = error.message || error.response.data.message;
            ElMessage.error(message)
        })
}

onMounted(() => {
    console.log('props.connect', props.connect)
})
</script>
<style>
.demo-split {
    height: 90vh;
    width: 100%;
    margin-bottom: 2px;
    border: 1px solid #dcdee2;
}

.demo-split-pane {
    padding: 10px;
}
</style>

